<template>
  <div class="card-wrapper">
    <a-card title="资源详情">
      <template #actions>
        <div>
          <setting-outlined />
          分享
        </div>
        <div>
          <edit-outlined />
          海搜
        </div>
        <div>
          <ellipsis-outlined />
          举报
        </div>
      </template>
      <div style="text-align: center">
        <a-image :width="100" :src="state?.icon"></a-image>
        <div class="content-name">{{ state?.name }}</div>
        <div class="content-tags">
          <a-tag color="#cd201f" style="cursor: pointer" @click="handleCollect(state?.id)">
            <template #icon>
              <heart-outlined />
            </template>
            {{ state?.collect ? state?.collect : 0 }}
          </a-tag>
          <a-tag
            color="#3b5999"
            style="cursor: pointer"
            @click="handleShareLink(state?.link as string)"
          >
            <template #icon>
              <share-alt-outlined />
            </template>
            分享
          </a-tag>
        </div>
        <div>{{ state?.description }}</div>
        <div class="content-labels">
          <a-tag
            v-for="(item, index) in state?.labels"
            :key="item.id"
            :color="index === 0 ? 'success' : 'default'"
          >
            {{ item.name }}
          </a-tag>
        </div>
        <a-divider />
        <a-descriptions>
          <a-descriptions-item label="链接" :span="3">
            <a-typography-paragraph>
              <a-typography-link
                :href="state?.link"
                :copyable="{
                  text: state?.link,
                  tooltip: true,
                  onCopy: onCopy,
                }"
              >
                {{ state?.link }}
              </a-typography-link>
            </a-typography-paragraph>
          </a-descriptions-item>
          <a-descriptions-item label="时间" :span="3">
            {{ state?.releaseTime }}
          </a-descriptions-item>
          <a-descriptions-item label="推荐人" :span="3" :contentStyle="{ alignItems: 'center' }">
            <a-avatar :src="state?.publishUser?.avatar" />
            <span style="margin-left: 5px; font-size: 16px; font-weight: 500">
              {{ state?.publishUser?.username }}
            </span>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { collectResource, findResourceById } from '@/api/resource';
import { useUserInfoStore } from '@/store';
import { ResourceItem } from '@/types/resource';
import {
  EditOutlined,
  EllipsisOutlined,
  HeartOutlined,
  SettingOutlined,
  ShareAltOutlined,
} from '@ant-design/icons-vue';
import { toClipboard } from '@soerenmartius/vue3-clipboard';
import { message } from 'ant-design-vue';
import { PropType, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const userStore = useUserInfoStore();
const props = defineProps({
  propResourceId: {
    required: true,
    type: Number as PropType<number | null>,
  },
});
const state = ref<ResourceItem>();
const router = useRouter();
const resourceId = ref<number | null>(props.propResourceId);
const handleShareLink = (link: string | undefined | null) => {
  if (link) {
    const str = '我在知识星球发现了好的资源，快来看看吧！链接：' + window.location.href;
    toClipboard(str);
    message.success('复制成功');
  } else {
    message.error('复制失败');
  }
};
const onCopy = () => {
  message.success('复制成功');
};
const handleCollect = (rid?: number | null) => {
  if (rid && userStore.userInfo.uid) {
    collectResource(userStore.userInfo.uid, rid).then((res: any) => {
      if (res) {
        if (res.code === 200) {
          message.success('收藏成功');
          loadResource();
        } else {
          message.error(res.msg);
        }
      }
    });
  }
};
const loadResource = () => {
  if (resourceId.value) {
    findResourceById(resourceId.value).then((res) => {
      if (res) {
        state.value = res.data;
      }
    });
  } else {
    message.error('资源id不能为空');
    router.back();
  }
};
onMounted(() => {
  loadResource();
});
</script>
<style lang="less" scoped>
.card-wrapper {
  .content-name {
    margin-bottom: 8px;
    color: #000;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: 1px;
  }
  .content-tags {
    margin-bottom: 24px;
    user-select: none;
  }
  .content-labels {
    margin-top: 24px;
  }
}
</style>
